<template>
    <div>
        <div class="vs-table-box">
            <h3>{{type | typeTitle}}商品</h3>
            <el-form label-position="right" :rules="rules" ref="ruleForm" class="vs--info"  label-width="130px" :model="ruleForm">
                <el-form-item label="商品类型：" :inline="true" prop="username">
                    <el-select clearable v-model="ruleForm.username" placeholder="请选择">
                        <el-option label="推拿" value="1"> </el-option>
                        <el-option label="足疗" value="2"> </el-option>
                        <el-option label="SPA" value="3"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称：" :inline="true" prop="username">
                   <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="商品简介：" prop="username" style="width:100%">
                    <el-input  type="textarea" :rows="5" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="商品详细描述：" prop="username">
                   <div ref="edit"></div>
                </el-form-item>
                <el-form-item label="上传图片：" prop="username">
                   <VsUploading :img-list.sync="ruleForm.username"></VsUploading>
                </el-form-item>
                <el-form-item label="商品规格：" prop="username">
                    <div v-for="(v, i) in list" :key="i" class="mt-20">
                        <b>{{ v.name }}：</b>
                        <el-checkbox-group v-model="checkList[i].list" @change="handleClick">
                            <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" />
                        </el-checkbox-group>
                    </div>
                    <!-- <div class="mt-20">
                        <el-button type="primary" @click="handleClick">确定</el-button>
                    </div> -->
                    <div class="mt-20">
                        <el-tag v-for="(item, index) in skuList" :key="index" style="margin:10px 10px;">{{ item }}</el-tag>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                    <el-button @click="utils.backPage()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import E from 'wangeditor'
import VsUploading from '@/components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data(){
        return{
            type:1,     //1:详情    2:添加
            id:0,
            ruleForm:{
                username:'',
                html:""
            },
            rules:{
                username: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ],
            },
            list: [
                { name: '尺码', list: ['S', 'M', 'L', 'XL', 'XXL'] },
                { name: '颜色', list: ['红色', '黄色', '蓝色', '粉色', '紫色'] },
                { name: '图案', list: ['猫咪', '人物', '飞机', '闪电', '字母'] }
            ],
            checkList: [
                { name: '尺码', list: [] },
                { name: '颜色', list: [] },
                { name: '图案', list: [] }
            ],
            skuArray: [],
            skuList: []
        }
    },
    created(){
        let {type,id} = this.$route.query;
        if(type){
            this.type = type;
            this.$route.meta.title = this.xin.typeTitle(type)+'商品'
        }
        this.id = id;
        this.$nextTick(()=>{
            this.getEdit()
        })
    },
    methods:{
        handleClick() {
            // 先清空数据，保证连续点击按钮，数据不会重复
            this.skuArray = []
            this.skuList = []
            // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
            this.checkList.forEach(element => {
                element.list.length > 0 ? this.skuArray.push(element.list) : ''
            })
            // 勾选了规格，才调用方法
            if (this.skuArray.length > 0) {
                this.getSkuData([], 0, this.skuArray)
            }
        },
        // 递归获取每条SKU数据
        getSkuData(skuArr = [], i, list) {
            for (let j = 0; j < list[i].length; j++) {
                if (i < list.length - 1) {
                skuArr[i] = list[i][j]
                this.getSkuData(skuArr, i + 1, list) // 递归循环
                } else {
                this.skuList.push([...skuArr, list[i][j]]) // 扩展运算符，连接两个数组
                }
            }
        },
        submitForm(){

        },
        // 富文本编辑
        getEdit() {
            this.editor = new E(this.$refs.edit)
            this.editor.config.onchange = (html) => {
                this.ruleForm.html = html
            }
            this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertImgFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertVideoFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor.create()
            this.editor.txt.html(this.ruleForm.html);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>